<template>
    <li class="right">
        <el-tabs type="card" value ="实时成交">
            <el-tab-pane :label="$t('pk[0]')" name="盘口">
                <!-- <ul class="rheader">
                    <li class="list"></li>
                    <li class="list"></li>
                    <li class="list"></li>
                </ul> -->
                <ul class="rightheader">
                    <li class="price">{{$t('pk[1]')}}</li>
                    <li class="volume">{{$t('pk[2]')}}</li>
                    <li class="name">{{$t('pk[3]')}}</li>
                </ul>
                <div class="buyordermain">
                    <ul class="buyorder" v-for="(item, index) in realtime.asks" :key="index">
                        <li class="price fall">{{$public.toLowFixed(item.price,Prodata.code)}}</li>
                        <li class="volume">{{item.totalSize}}</li>
                        <li class="name">{{item.cumulative}}</li>
                    </ul>
                </div>
                <section class="jiange">
                    <!-- <h2 class="price rise" >{{Prodata.price}}  ↓</h2> -->
                    <h2 v-if="Prodata.change < 0" class="price rise">{{$public.toLowFixed(Prodata.price,Prodata.code)}}  ↓</h2>
                    <h2 v-else-if="Prodata.change > 0" class="price fall">{{$public.toLowFixed(Prodata.price,Prodata.code)}} </h2>
                    <h3 class="changeRate">≈{{$public.toLowFixed(Prodata.cnyPrice,Prodata.code, 2)}}CNY</h3>
                </section>
                <div class="sellordermain">
                    <ul class="sellorder" v-for="(item, index) in realtime.bids" :key="index">
                        <li class="price rise">{{$public.toLowFixed(item.price,Prodata.code)}}</li>
                        <li class="volume">{{item.totalSize}}</li>
                        <li class="name">{{item.cumulative}}</li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('pk[4]')" name="实时成交">
                <div class="realtime">
                    <ul class="rightheader">
                        <li class="price">{{$t('pk[1]')}}</li>
                        <li class="volume">{{$t('pk[2]')}}</li>
                        <li class="name">{{$t('pk[5]')}}</li>
                    </ul>
                    <div class="realtimemain">
                        <ul class="realorder" v-for="(item, index) in RealTimeDealdata_throttle" :key="index">
                            <li class="price">{{$public.toLowFixed(item.price,Prodata.code)}}</li>
                            <li class="volume">{{item.amount}}</li>
                            <li class="name">
                                <span class="fall" v-if="item.dc == 'buy'">{{$t('order[4]')}}</span>
                                <span class="rise" v-if="item.dc == 'sell'">{{$t('order[5]')}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </li>
</template>

<script>
import { realtimetrade, gethandicap } from '@/api/contract'
// import PagesSize from "_dom/paging"
// import PersonalHeader from "_dom/personalheader"
import { contractwsdepth, contractwstrader } from "@/libs/util";
import _ from "lodash";
export default {
    name: 'contratrealtime',
    props:['Prodata', 'codetype'],
    data () {
        return {
            realtime:"",
            RealTimeDealdata: "",
            asks:[],
            RealTimeDealdata_throttle:[]
        }
    },
    watch: {
        'codetype': function(newVal, oldVal){
            if(oldVal){
                let wsdatadepth = {
                    unsub: 'depth@' + oldVal,
                };
                let wsdatatrader = {
                    unsub: 'depth@' + oldVal,
                };
                contractwsdepth( wsdatadepth , 'unsub');
                contractwstrader( wsdatatrader , 'unsub');
                this.getdata(newVal);
                this.RealTimeDealget(newVal);
            };
        },
        ['RealTimeDealdata']:_.throttle(function(newVal){
            this.RealTimeDealdata_throttle = newVal
        },800,{leading:true})
    },
    methods: {
        getdata(data){//盘口数据
            this.realtime = [];
            let _data = {
                code: data,
            };
            gethandicap(_data).then(res => {  
                if(res.data.status_code == 200){
                    this.realtime = res.data.data;
                    let wsdata = {
                        sub: 'depth@' + data,
                    }
                    contractwsdepth(wsdata, this);
                }
            }).catch(err => {});
        },
        contractwsdepthlist(data){
            this.realtime = data;
        },
        RealTimeDealget(data){ //实时成交
            let _data = {
                code: data,
            };
            this.RealTimeDealdata = [];
            realtimetrade(_data).then(res => {  
                 
                    this.RealTimeDealdata = res.data;
                    let wsdata = {
                        sub: 'trader@' + _data.code,
                    }
                    contractwstrader(wsdata, this);
                 
            }).catch(err => {});
        },
        contractwstraderlist(data){
            this.RealTimeDealdata = data.data;
        }
    },
    created(){
        this.getdata(this.codetype);
        this.RealTimeDealget(this.codetype);
    },
    components: {
        
    },
}
</script>

